<template>
    <div class="container">
        <div class="search-content">
            <el-form :model="searchContent" ref="formRef" :inline="true">
                <el-form-item prop="store_name" label="经销商名称：">
                    <el-input v-model="searchContent.store_name" placeholder="请输入" maxlength="32"></el-input>
                </el-form-item>
                <el-form-item prop="status" label="审核状态：">
                    <el-select v-model="searchContent.status" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in statusType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="operator_name" label="操作人：">
                    <el-input v-model="searchContent.operator_name" placeholder="操作人" maxlength="32"></el-input>
                </el-form-item>
                <el-form-item label="添加时间：">
                    <el-date-picker
                        v-model="selectTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间" 
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss"
                        :default-time="['00:00:00', '23:59:59']"
                        @change="handleDateChange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch(true)">搜索</el-button>
                    <el-button type="primary" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight">
                <el-table-column 
                    prop="id" label="日志ID" width="80" align="center">
                </el-table-column>
                <el-table-column 
                    prop="store_name" label="经销商名称" min-width="160" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="cost" label="服务年费金额" min-width="130" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="operator_name" label="操作人" min-width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="remark" label="备注" min-width="170" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="create_time" align="center" label="添加时间" min-width="150">
                </el-table-column>
                <el-table-column label="操作" min-width="90" align="center">
                    <template #default="{ row }">
                        <el-popconfirm
                            title="确定审核该年费?"
                            width="160px"
                            cancelButtonType="plain"
                            confirmButtonText="通过"
                            cancelButtonText="取消"
                            @confirm="handleReview(row.id, 1)"
                            :disabled="row.status != 0">
                            <template #reference>
                                <el-button 
                                    type="text" :class="statusType[(+row.status || 0)].class">
                                    {{ statusType[(+row.status || 0)].label }}
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom flex-item">
            <div class="btn-group"></div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js"
import { objScreen } from "@/common/js/util.js"
export default {
    data() {
        return {
            searchContent: {
                store_name: '',       // 经销商名称
                operator_name: '',    // 操作人
                status: '',           // 审核状态
                start_time: '',       // 开始时间
                end_time: '',         // 结束时间 
                is_search: false      // 是否处于搜索
            },
            selectTime: '',           // 时间 [start, end]
            pageArr: {
                page: 1,           // 当前页码
                pageSize: +localStorage.getItem('pageSize') || 20, // 每页显示数量
                total: 0              // 数据总数
            },
            statusType: [
                { value: 0, label: '未审核', class: 'color-danger' }, 
                { value: 1, label: '已审核', class: 'color-success' }
            ],
            dataList: [],             // 列表数据
            oHeight: 600
        }
    },
    methods: {
        async getData() {
            try {
                let datas = {
                    pageSize: this.pageArr.pageSize,
                    page: this.pageArr.page
                }
                if (this.searchContent.is_search) {
                    datas = { ...datas, ...this.searchContent }
                }
                objScreen(datas)
                const res = await this.$http.post('/admin/auth/index.php?act=storesPermission&op=getServerCostList', datas)
                if (res.code == 1) {
                    this.dataList = res.data.list || []
                    this.pageArr.total = +res.data.total
                }
            } catch (error) {
                error && this.$message.error(`${error}`)
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize)
            this.pageArr.pageSize = pageSize
            this.handleCurrentChange(1)
        },
        handleCurrentChange(page) {
            this.pageArr.page = page
            this.getData()
        },
        handleDateChange(val = null) {
            if (val) {
                this.searchContent.start_time = val[0]
                this.searchContent.end_time = val[1]
            } else {
                this.searchContent.start_time = null
                this.searchContent.end_time = null
            }
        },
        handleSearch(is_search = true) {
            this.searchContent.is_search = is_search
            this.handleCurrentChange(1)
        },
        handleReset() {
            this.selectTime = null
            this.$refs.formRef.resetFields()
            this.handleDateChange()
            if (!this.searchContent.is_search) return
            this.handleSearch(false)
        },
        handleReview(server_id, status) {
            this.$http.post('/admin/auth/index.php?act=storesPermission&op=examineServerCost', { server_id, status })
            .then(res => {
                if (res.code == 1) {
                    this.$message.success('审核成功')
                    this.getData()
                } else {
                    this.$message.error(`${res.msg}`)
                }
            })
            .catch(error => this.$message.error(`${error}`))
        }
    },
    created() {
        this.getData()
    },
    mounted() {
        resize(this)
    }
}
</script>
